<template>
    <div>
        <el-upload
          class="avatar-uploader"
          :action="url"
          :headers = "headers"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imgUrl" :src="imgUrl" class="avatar">
          <!-- <img v-if="imgPath" :src="imgPath" :imgPath="imgPath" class="avatar"> -->
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Provide,Emit } from "vue-property-decorator";
import commonApi from "@/api/common";
@Component({
  components: {}
})
export default class supplierEditDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Provide() headers: any = {token:localStorage.getItem("tsToken")};//上传图片请求头
  @Provide() url: string = process.env.VUE_APP_URL+'manage/demo/index/upload'; 
  @Prop() imgUrl!: ''
  @Provide() imgPath:any=''
  handleAvatarSuccess(res:any, file:any) {
    this.imgPath = res.data.img_url;
    this.$emit('bindSendImg',this.imgPath)//将图片路径传递给父组件
  }
  beforeAvatarUpload(file:any) {
    const isJPG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 5;
    // if (!isJPG) {
    //   this.$message.error('上传头像图片只能是 png 格式!');
    // }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 1MB!');
    }
    return isLt2M;
  }
  created() {
    this.imgPath=this.imgUrl
  }

}
</script>
<style scoped>
</style>